import React, { useState,useEffect } from 'react'
// jsx 对象 React.createElement('div', {className:'hello'}, 
// React.createElement('h1', null, 'Hello World'))
const  Hello = () => <div className="hello">Hello World!</div>;
// console.log(Object.prototype.toString.call(Hello));  {   }
// 1. JSX  优秀 且简单的UI 表达创新 
// 2. JSX   -> babel -> 转义 React.createElement()
// Index  
const Header = () => {
  return (
    <div>
      <Title title="首页"/>
    </div>
  )
}
// props? 父组件给的 不是自己的
const Title = (props) => {
  const {title } = props
  return (
    <header>
      {title}
    </header>
  )
}
const Main = ({users}) => {
  // props  ? users 
  return (
    <div>
      Main
      <ul>
        {/* uniq   */}
        {users.map(user => <li key={user.id}>{user.id}:{user.name} - {user.age}</li>)}
      </ul>
    </div>
  )
}

const Footer = ({users}) => {
  return (
    <footer>
      Footer,有{users}位用户
    </footer>
  )
}

const Index = () => {
  // 不是用useState  数据绑定， 且响应
  // 不够格成为状态  
  // 状态  响应式的
  const [users, setUsers] = useState([{
    name: '杨祥',
    age: 18,
    id: 1,
  }, {
    name: '杨大佬',
    age: 17,
    id: 2,
  }, {
    name: '大圣',
    age: 18,
    id: 3,
  }]);
  useEffect(()=>{
    setTimeout(()=>{
      setUsers([...users,{
         name: '大神',
      age: 19,
      id: 4
      }])
    },1000)
  },[])

  // setTimeout(() => {
  //   setUsers(users.push({
  //    
  //   }))
  // }, 1000)
  return (
    // 如果唯一的父元素，只起到包裹作用， 而不需要标签 省却他
    <>
      <Header />
      <Main users={users}/>
      <Footer users={users.length}/>
    </>
  )
}

function App() {
  return (<Index />)
  // return <Hello />
  // return React.createElement('div', null, 'hello world')
}

export default App